<template>
  <div class="page">
    <!-- Form -->
    <Form
      ref="formRef"
      class="page-form"
      :form="form"
      :config="config"
      :name="name"
      search
      @search-form="searchForm"
      @reset-form="resetForm"
    >
      <template #inputNumber="{ data }">
        <span>{{ data.text }}</span>
      </template>
    </Form>
    <!-- Table -->
    <div class="page-table">
      <TableButtons
        class="mb10"
        custom
        :list="tableButtons"
        @click="clickTableButtons"
      />
      <Table :columns="tableColumns" :data="list">
        <template #day="{ scope: { row, prop } }">
          <span v-if="row[prop] > 30">{{ row[prop] }}</span>
          <span v-else-if="row[prop] > 7" class="text-success">
            {{ row[prop] }}
          </span>
          <span v-else-if="row[prop] > 0" class="text-warning">
            {{ row[prop] }}
          </span>
          <span v-else class="text-danger">{{ row[prop] }}</span>
        </template>
        <template #operation="{ scope: { row } }">
          <el-link type="primary" :underline="false" @click="addHandle(row)">
            开通权限
          </el-link>
        </template>
      </Table>
    </div>
    <!-- Dialog -->
    <DialogAdd ref="dialogAddRef" :current="current" @confirm="confirmHandle" />
  </div>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
import Table from '@/components/Table/Table.vue'
import TableButtons from '@/components/TableButtons/TableButtons.vue'
import DialogAdd from './add.vue'
// hooks
import useForm from '@/hooks/useForm'
import useAsync from '@/hooks/useAsync'
// api
import { queryUser } from '@/api/customer'
// others
import { ref } from 'vue'
import { formData, formConfig, tableColumns, tableButtons } from './config'

/** Form */
const formRef = ref()
const { form, config, submitForm, resetFormData } = useForm({
  formRef,
  formData,
  formConfig
})
const searchForm = async () => {
  submitForm(() => {
    getTableList(form)
  })
}
const resetForm = () => {
  resetFormData()
  searchForm()
}
/** Table */
const { result: list, doResult: getTableList } = useAsync({
  request: queryUser
})
/** TableBUttons */
const clickTableButtons = (item) => {
  if (item.value === 'add') {
    addHandle()
  }
}
/** 修改权限 */
const dialogAddRef = ref(null)
const current = ref(null)
const addHandle = (row) => {
  current.value = row || null
  dialogAddRef.value.show()
}
const confirmHandle = () => {
  searchForm()
}
</script>

<style lang="less" scoped></style>
